import React from 'react';
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message} from 'antd';
import BizParams from '../../components/commons/BizParams'
import CurrencySelect from '../../components/commons/CurrencySelect'
import OperatorConstant from "../../utils/OperatorConstant";
import RecAccSelect from '../../components/commons/RecAccSelect'

const R = require('ramda');
import moment from 'moment'
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';
const Option = Select.Option;


export default Form.create({wrappedComponentRef: true})(class EditForex extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            disabled: true,
            type: "",
            options: [],
            value : "init",
        }
    }

    handleCancel = () => {
        this.props.form.resetFields(['recamount','recamountunit','payman','payaccount','settlement',
        'recaccount','rectime','memo','noclaimamount','norelateamount','cstexchangerate'
        ]);
        this.setState({ options: [] , value: "init"});
        // this.props.form.setFieldsValue({recamount:""});
        // this.props.form.setFieldsValue({recamountunit:""});
        // this.props.form.setFieldsValue({paymanselect:""});
        // this.props.form.setFieldsValue({payaccount:""});
        // this.props.form.setFieldsValue({settlement:""});
        // this.props.form.setFieldsValue({recaccount:""});
        // this.props.form.setFieldsValue({rectime:""});
        // this.props.form.setFieldsValue({memo:""});
        // this.props.form.setFieldsValue({noclaimamount:""});
        // this.props.form.setFieldsValue({norelateamount:""});
        // this.props.form.setFieldsValue({cstexchangerate:""});
    }


    handleConfirm = () => {
        if (this.props.type == OperatorConstant.view) {
            return;
        }

        this.props.form.validateFields((errors, values) => {
            if (errors) return;


            let type = "";
            let payload = {}

            type = "foreignExchangeManage/addForex";
            payload = {
                payaccount: values.payaccount,
                payman: values.payman,
                rectime: values.rectime.format(dateFormat),
                recamount: values.recamount,
                recamountunit: values.recamountunit,
                recaccount: values.recaccount,
                settlement: values.settlement,
                memo: values.memo,
                recaccountName: values.recaccountName,
                country: values.country,
                onSuccess:()=>{
                    this.props.handleSearch();
                }
            };

            this.props.dispatch({
                type: type,
                payload: payload
            })

            this.props.handleCancel();
        })
    }


    handleChange = (value) => {
        this.setState({ options: [] });
        this.setState({ value: value });

        let options = [];
        if(!R.isNil(this.props.paymen))
        {
            this.props.paymen.forEach((item)=>{
                if(item.payman.indexOf(value) != -1){
                    options.push(<Option value={item.payman}>{item.payman}</Option>)
                }

            });
            this.setState({ options: options });
        }
    
    }


    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {labelCol: { xs: {span: 8}, sm: {span: 8}}, wrapperCol: {xs: {span: 15}, sm: {span: 14}}};
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;

        let disable = (this.props.disabled || this.props.type == OperatorConstant.view || this.props.type == OperatorConstant.approval ||
            this.props.type == OperatorConstant.exchange );
        let options=[];


        if(!R.isNil(this.props.paymen)  && R.equals("init", this.state.value))
        {
            this.props.paymen.forEach((item)=>{
                options.push(<Option value={item.payman}>{item.payman}</Option>)
            })
        }

        let accountList = R.isNil(this.props.accountList) ? [] : this.props.accountList;

        return (
            <Form>
                {/*{*/}
                    {/*this.props.type==OperatorConstant.add?*/}
                        {/*<Row>*/}
                            {/*<Col span={12}>*/}
                                {/*<FormItem*/}
                                    {/*{...formItemLayout}*/}
                                    {/*label="请选择付汇人"*/}
                                    {/*hasFeedback*/}
                                {/*>*/}
                                    {/*{getFieldDecorator('paymanselect', {*/}
                                        {/*rules: [{*/}
                                            {/*required: false, message: '请输入付汇人',*/}
                                        {/*}],*/}
                                        {/*initialValue: dataSource.payman*/}
                                    {/*})(*/}
                                        {/*<Select*/}
                                            {/*mode="combobox"*/}
                                            {/*defaultActiveFirstOption={false}*/}
                                            {/*value={this.state.value}*/}
                                            {/*showArrow={false}*/}
                                            {/*filterOption={false}*/}
                                            {/*showSearch*/}
                                            {/*onChange={this.handleChange} placeholder="可通过输入代码或关键字搜索"  disabled={disable} >*/}
                                                {/*{this.state.options}*/}
                                        {/*</Select>*/}
                                    {/*)}*/}
                                {/*</FormItem>*/}
                            {/*</Col>*/}
                        {/*</Row>:""*/}
                {/*}*/}

                <Row>
                    <Col span={12}>

                        <FormItem
                            {...formItemLayout}
                            label="收汇金额"
                            hasFeedback
                        >
                            {getFieldDecorator('recamount', {
                                rules: [{
                                    required: true, message: '请输入收汇金额',
                                }],
                                initialValue: dataSource.recamount
                            })(
                                <InputNumber style={{width: '100%'}} disabled={disable} min={0} max={99999999999999} precision={4}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="收汇币种"
                            hasFeedback
                        >
                            {getFieldDecorator('recamountunit', {
                                rules: [{
                                    required: true, message: '请输入币种',
                                }],
                                initialValue: dataSource.recamountunit
                            })(
                                <CurrencySelect  style={{width: '100%'}} disabled={disable}/>
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="请选择付汇人"
                            hasFeedback
                        >
                            {getFieldDecorator('payman', {
                                rules: [{
                                    required: true, message: '请输入付汇人',
                                }],
                                initialValue: dataSource.payman
                            })(
                                <Select
                                    mode="combobox"
                                    defaultActiveFirstOption={false}
                                    value={this.state.value}
                                    showArrow={false}
                                    filterOption={false}
                                    showSearch
                                    onChange={this.handleChange} placeholder="可通过输入代码或关键字搜索"  disabled={disable} >
                                    {R.isEmpty(options) ?  this.state.options : options}
                                </Select>
                            )}
                        </FormItem>
                    </Col>

                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="付汇账号"
                            hasFeedback
                        >
                            {getFieldDecorator('payaccount', {
                                rules: [{
                                    required: true, message: '请输入付汇账号',
                                }],
                                initialValue: dataSource.payaccount
                            })(
                                <Input disabled={disable} maxLength="100"/>
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="收汇方式"
                            hasFeedback
                        >
                            {getFieldDecorator('settlement', {
                                rules: [{
                                    required: true, message: '请输入收汇方式',
                                }],
                                initialValue: dataSource.settlement
                            })(
                                <BizParams sprCode={"settlement"} style={{width:'100%'}} disabled={disable}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="收款账号"
                            hasFeedback
                        >
                            {getFieldDecorator('recaccount',{
                                rules: [{
                                    required: true, message: '请输入收款账号',
                                }],
                                initialValue: dataSource.recaccount
                            })(
                                <Select  style={{width: "100%"}} disabled={disable}>
                                    {
                                        R.isNil(accountList) || R.isEmpty(accountList) ? <Option value=""> </Option>
                                            :
                                            (accountList).map(item => {
                                                return (<Option value={item.bankCode}
                                                                key={item.id}>{item.bankCode}</Option>);
                                            })
                                    }
                                </Select>
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="收款账户名"
                            hasFeedback
                        >
                            {getFieldDecorator('recaccountName', {
                                rules:[{
                                    required: true, message: "请输入收款账户名",
                                }],
                                initialValue: dataSource.recaccountName
                            })(
                                <Input disabled={disable} maxLength="200"/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="国家"
                            hasFeedback
                        >
                            {getFieldDecorator('country', {
                                rules:[{
                                    required: true, message: "请输入国家",
                                }],
                                initialValue: dataSource.country
                            })(
                                <Input disabled={disable} maxLength="11"/>
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="收汇日期"
                            hasFeedback
                        >
                            {getFieldDecorator('rectime', {
                                rules: [{
                                    required: true, message: '请输入收汇日期',
                                }],
                                initialValue: dataSource.rectime== undefined ? '' : moment(dataSource.rectime, dateFormat)
                            })(
                                <DatePicker style={{width: '100%'}} disabled={disable}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="备注"
                            hasFeedback
                        >
                            {getFieldDecorator('memo', {
                                initialValue: dataSource.memo
                            })(
                                <Input type={'textarea'} disabled={disable} maxLength="100"/>
                            )}
                        </FormItem>
                    </Col>
                </Row>

                {this.props.type == OperatorConstant.view ?
                    <span>
                        <Row>
                            <Col span={12}>
                                <FormItem
                                    {...formItemLayout}
                                    label="待认领金额"
                                    hasFeedback
                                >
                                    {getFieldDecorator('noclaimamount', {
                                        initialValue: dataSource.noclaimamount
                                    })(
                                        <Input disabled={disable} maxLength="18"/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem
                                    {...formItemLayout}
                                    label="待关联金额"
                                    hasFeedback
                                >
                                    {getFieldDecorator('norelateamount', {
                                        initialValue: dataSource.norelateamount
                                    })(
                                        <Input disabled={disable} maxLength="18"/>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <FormItem
                                    {...formItemLayout}
                                    label="客户结汇汇率"
                                    hasFeedback
                                >
                                    {getFieldDecorator('cstexchangerate', {
                                        initialValue: dataSource.cstexchangerate
                                    })(
                                        <Input disabled={disable} maxLength="18"/>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </span>
                    :""

                }

            </Form>

        );
    }
})


